<template>
  <el-dialog
    class="ba-operate-dialog"
    :close-on-click-modal="false"
    :model-value="access.internetNumShow"
    @close="toggleForm"
  >
    <template #header>
      <div class="title">{{ access.model }}</div>
    </template>
    <el-scrollbar class="ba-table-form-scrollbar">
      <div class="ba-operate-form">
        <el-form
          ref="formRef"
          @keyup.enter="onSubmit(formRef)"
          :model="access.single"
          label-position="right"
          label-width="200"
          :rules="rules"
        >
          <el-form-item label="流量卡号" prop="cardnumber">
            <el-input
              v-model="access.single!.cardnumber"
              placeholder="请录入流量卡号"
            />
          </el-form-item>
        </el-form>
      </div>
    </el-scrollbar>
    <template #footer
      ><el-button @click="toggleForm">取消</el-button>
      <el-button v-blur @click="onSubmit(formRef)" type="primary">
        保存
      </el-button></template
    >
  </el-dialog>
</template>
<script lang="ts" setup>
import { ref, reactive, inject, onMounted, computed } from "vue";
import type { ElForm, FormRules, ElTree, FormInstance } from "element-plus";
import { ElNotification } from "element-plus"; //处理导航信息

// 338222112336
const access = inject("access") as any;
const formRef = ref<InstanceType<typeof ElForm>>();

const state: { cardnumber: string } = reactive({ cardnumber: "" });

const rules = reactive<FormRules>({
  cardnumber: [
    { required: true, message: "流量卡号不能为空", trigger: "blur" },
    {
      validator: function (rule, value, callback) {
        const title = /^[0-9]+$/;
        if (!title.test(value)) {
          callback(new Error("只能输入数字"));
        } else {
          callback();
        }
      },
      trigger: "blur",
    },
  ],
});

//关闭弹出框
const toggleForm = () => {
  access.internetNumShow = false;
};
//绑定网关
const onSubmit = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid, fields) => {
    if (valid) {
      access
        .postInternetBinding({
          id: access.single.id,
          cardnumber: access.single.cardnumber,
        })
        .then((res: any) => {
          console.log("绑定流量卡号", res);
          toggleForm();
          ElNotification({
            type: "success",
            message: "操作成功",
          });
        });
    } else {
      console.log("error submit!", fields);
    }
  });
};

onMounted(() => {});
</script>
<style lang="scss" scoped></style>
